<template>
  <el-dialog :title="'联房列表'" :close-on-click-modal="false" :visible.sync="visible" width="70%">
  <div>
    <el-form :inline="true">
      <div style="text-align: left;display: inline-table;">
        <el-form-item label="关键字">
          <el-input v-model="dataForm.key" placeholder="姓名、手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList">查询</el-button>
        </el-form-item>
      </div>
    </el-form>

    <el-table border v-loading="guestListLoading" element-loading-text="拼命加载中" style="width: 100%" row-key="id" ref="unitedHouseList"
      :default-sort="{prop: 'date', order: 'descending'}" default-expand-all :data="unitedHouseList" tooltip-effect="dark"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column prop="roomSignNum" label="房间" width="120">
        <template slot-scope="scope">
          <template v-if="scope.row.loadMore == 'LoadMore'">
            <a type="text" @click="loadMoreBtn(scope.row)">查看更多</a>
          </template>
          <template v-else>
            <span v-if="scope.row.roomSignNum">{{ scope.row.roomSignNum }}</span>
            <span v-else> -- </span>
          </template>
        </template>

      </el-table-column>
      <el-table-column prop="sysNo" label="单号" sortable width="150">
        <template slot-scope="scope">
          <a type="text" @click="toAccounting({ singleId: scope.row.singleId }, '1')">{{ scope.row.sysNo }}</a>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="客人/电话">
        <template slot-scope="scope" v-if="scope.row.loadMore != 'LoadMore'">
          <div>{{scope.row.name ? scope.row.name : '--'}}</div>
          <div>{{scope.row.tel ? (scope.row.tel=='null'?'--':scope.row.tel) : '--'}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="checkinType" label="入住类型" sortable>
        <template slot-scope="scope">
          <span v-if="scope.row.checkinType == 0">全天房</span>
          <span v-if="scope.row.checkinType == 1">钟点房</span>
          <span v-if="scope.row.checkinType == 2">自用房</span>
          <span v-if="scope.row.checkinType == 3">免费房</span>
        </template>
      </el-table-column>
      <el-table-column prop="roomPrice" label="房价" sortable>
        <template slot-scope="scope">
          <template v-if="scope.row.prices">
            <el-popover placement="right" trigger="hover">
              <!-- 新版-->
              <div class="ant-popover-inner-content">
                <div class="recent_price_ul table_recent_price_ul">
                  <table>
                    <thead>
                      <tr>
                        <th>
                          <div class="list_box clear_float">
                            <span style="width: 100%;">价格</span>
                          </div>
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>
                          <div class="list_box clear_float">
                            <span v-for="(item, index) in scope.row.prices.dateList" :key="index">
                              <div v-for="(value, key) in item" :key="key">{{key}}</div>
                              <div style="margin-bottom: 6px;" v-for="(value, key) in item" :key="key">
                                <span>{{ value }} 元</span>
                              </div>
                            </span>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <span slot="reference">{{ scope.row.roomPrice ? scope.row.roomPrice : '0' }}</span>
            </el-popover>
          </template>
          <template v-else>

          </template>

        </template>
      </el-table-column prop="sourceType">
      <el-table-column label="客人类型">
        <template slot-scope="scope">
          <span v-if="scope.row.sourceType == 0">散客</span>
          <span v-if="scope.row.sourceType == 1">会员</span>
          <span v-if="scope.row.sourceType == 2">协议单位</span>
          <span v-if="scope.row.sourceType == 3">中介</span>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <!-- {{scope.row.singleEntity.type}} -->
          <span v-if="scope.row.stype == 1">
            <span v-if="scope.row.state == 0">已结退房</span>
            <span v-if="scope.row.state == 1">正常入住</span>
            <span v-if="scope.row.state == 2">未结退房</span>
            <span v-if="scope.row.state == 3">联房退房</span>
          </span>
          <span v-if="scope.row.stype == 2">
            <span v-if="scope.row.sreserveState == 1">预定中</span>
            <span v-if="scope.row.sreserveState == 2">已入住</span>
            <span v-if="scope.row.sreserveState == 3">部分入住</span>
            <span v-if="scope.row.sreserveState == 4">取消预定</span>
            <span v-if="scope.row.sreserveState == 5">超时预定</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="预抵" prop="arrivalsTime" sortable>
        <template slot-scope="scope">
          {{ scope.row.arrivalsTime }}
        </template>
      </el-table-column>
      <el-table-column label="预离" prop="predissociationTime" sortable>
        <template slot-scope="scope">
          {{ scope.row.predissociationTime }}
        </template>
      </el-table-column>
      <el-table-column label="离店日期" prop="scheckOutTime" sortable>
        <template slot-scope="scope">
          {{ scope.row.scheckOutTime ? scope.row.scheckOutTime : ' -- ' }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <template v-if="scope.row.loadMore == 'LoadMore'">
            <el-button type="text" size="small" @click="loadMoreBtn(scope.row)">查看更多</el-button>
          </template>
          <template v-else>
            <el-button type="text" size="small" @click="toAccounting({ singleId: scope.row.singleId }, '1')">查看</el-button>
            <span v-if="scope.row.stype == 1">
              <span v-if="scope.row.state == 1">
                <el-popover v-if="scope.row.aisSingle == 1" placement="left" width="80" trigger="hover">
                  <dl class="dl_drop">
                    <dd @click="ruzhangHandle(scope.row)">入账</dd>
                    <dd @click="addPeopleBtn(scope.row)">添加同住</dd>
                    <dd @click="xuzhuTiqian(scope.row)">续住/提前</dd>
                    <dd @click="jieZhangTuiFang(scope.row)">结账退房</dd>
                  </dl>
                  <el-button slot="reference" type="text" size="small">操作</el-button>
                </el-popover>
              </span>
            </span>
          </template>

        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 15px;text-align: right;" @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
      :current-page="pageIndex" :page-sizes="[5,10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    <changeRoom v-if="changeRoomVisible" ref="changeRoom" @refreClosing="getDataList"></changeRoom>
    <joinRoom v-if="joinRoomVisible" ref="joinRoom" @refreClosing="getDataList"></joinRoom>
    <xuzhuTiqian v-if="xuzhuTiqianVisible" ref="xuzhuTiqian" @refreClosing="getDataList" @refreshDataList="getDataList()"></xuzhuTiqian>
    <closingRoom v-if="closingRoomVisible" ref="closingRoom" @refreClosing="getDataList" @refreshDataList="getDataList()"></closingRoom>
    <ruzhang v-if="ruzhangVisible" ref="ruzhang" @refreshDataList="getDataList()"></ruzhang>
    <addPeople v-if="addPeopleVisible" ref="addPeople" @refreClosing="getDataList" @refreshDataList="getDataList()"></addPeople>
  </div>
    </el-dialog>
</template>

<script>
  import changeRoom from '../floorRoomSign/changeRoom';
  import joinRoom from '../floorRoomSign/joinRoom';
  import closingRoom from '../floorRoomSign/closingRoom';
  import xuzhuTiqian from '../floorRoomSign/xuzhuTiqian';
  import ruzhang from '../floorRoomSign/ruzhang';
  import addPeople from '../floorRoomSign/addPeople';
  import moment from 'moment';
  export default {
    data() {
      return {
        pickerOptions: {

        },
        visible: false,
        loading: false,
        shaixuan: false,
        guestListLoading: false,
        addPeopleVisible: false,
        ruzhangVisible: false,
        closingRoomVisible: false,
        changeRoomVisible: false,
        joinRoomVisible: false,
        xuzhuTiqianVisible: false,
        currDate: moment().format('YYYY-MM-DD'),
        unitedHouseList: [],
        platformSeller: [],
        pageIndex: 1,
        pageSize: 5,
        totalPage: 0,
        sj: {
          one: 0,
          two: 0,
          three: 0,
          four: 0,
          five: 0,
          ones: 0,
          twos: 0,
          threes: 0,
          fours: 0,
          fives: 0,
        },
        dataForm: {
          state: '1',
          externalNo: '',
          type: 0,
          lx: '1',
          reserveState: '1',
          sysNo: '',
          singleId:'',
          checkinType: '',
          sourceType: '',
          ruzhu1: '',
          ruzhu2: '',
          lidian1: '',
          lidian2: '',
          creat1: '',
          creat2: '',
        },
        sellerIds: [],
      };
    },
    components: {
      changeRoom,
      joinRoom,
      closingRoom,
      xuzhuTiqian,
      ruzhang,
      addPeople
    },
    activated() {
      this.getDataList();
    },
    methods: {
      init(singleId){
        Object.assign(this.dataForm, this.$options.data().dataForm)
        console.log("this.dataForm.singleId",this.dataForm.singleId)
        this.dataForm.singleId = singleId;
        this.visible = true;
        this.getDataList();
      },
      //清空筛选
      clearShaiXuan() {
        Object.assign(this.dataForm, this.$options.data().dataForm)
        this.getDataList();
      },
      addPeopleBtn(item) {
        this.addPeopleVisible = true;
        this.$nextTick(() => {
          this.$refs.addPeople.init({
            sellerId: item.sellerId,
            floorRoomId: item.floorRoomId,
            arrivalsTime: item.arrivalsTime,
            predissociationTime: item.predissociationTime,
            roomPrice: item.roomPrice,
            singleId: item.singleId,
            sign: item.sign
          });
        });
      },
      // 入账
      ruzhangHandle(item) {
        this.ruzhangVisible = true;
        this.$nextTick(() => {
          this.$refs.ruzhang.init({
            id: item.id,
            singleId: item.singleId
          });
        });
      },
      xuzhuTiqian(item) {
        console.log(item);
        this.xuzhuTiqianVisible = true;
        this.$nextTick(() => {
          this.$refs.xuzhuTiqian.init({
            id: item.id,
            predissociationTime: item.predissociationTime,
            arrivalsTime: item.arrivalsTime,
            singleId: item.singleId,
            floorRoomId: item.floorRoomId,
            roomId: item.hotelFloorRoomEntity.roomId
          });
        });
      },
      jieZhangTuiFang(item) {
        this.closingRoomVisible = true;
        this.$nextTick(() => {
          this.$refs.closingRoom.init({
            singleId: item.singleId,
            floorRoomId: item.floorRoomId
          });
        });
      },
      etixRoom(floorRoomId) {
        this.$confirm('您确认要退出联房吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/hotel/thotelfloorroomcheckinsingle/exit_single/${floorRoomId}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({
            data
          }) => {
            if (data && data.code === 0) {
              this.$message({
                message: this.$t('Common.OperationSuccessful'),
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList();
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        });
      },
      //换房
      changeRoom(item) {
        this.changeRoomVisible = true;
        this.$nextTick(() => {
          this.$refs.changeRoom.init(item);
        });
      },

      selectSeller(id, value) {
        this.getDataList()
      },
      //加载平台商家数据
      remoteMethod(query) {
        if (this.isAuth('hotel:hotelseller:list')) {
          this.loading = true;
          this.$http({
            url: this.$http.adornUrl("/hotel/hotelseller/platformSeller"),
            method: "get",
            params: this.$http.adornParams({
              sellerName: query
            })
          }).then(({
            data
          }) => {
            this.loading = false;
            if (data && data.code === 0) {
              this.platformSeller = data.page.list;
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      },
      // 加入联房
      joinRoomBtn(singleId) {
        this.joinRoomVisible = true;
        this.$nextTick(() => {
          this.$refs.joinRoom.init(singleId);
        });
      },
      toAccounting(item, type) {
        this.visible = false;
        //将数据存储到本地
        var p = {
          singleId: item.singleId,
          type: type
        };
        this.$cookie.set('accounting', JSON.stringify(p));
        this.$router.push({
          name: 'accounting'
        });
      },
      handleClick(tab, event) {
        console.log(tab, event);
        this.pageIndex = 1
        this.getDataList();
      },
      getDataList() {
        var ids = ""
        if (this.sellerIds) {
          this.sellerIds.forEach((item, index) => {
            ids += item + ","
          })
          ids = ids.substring(0, ids.length - 1)
        }
        var params = {
          page: this.pageIndex,
          limit: this.pageSize,
          ids: ids,
          ...this.dataForm,
        }
        this.guestListLoading = true;
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelfloorroomcheckinsingle/guest_list_load`),
          method: 'get',
          params: this.$http.adornParams(params)
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            console.log(data);
            this.unitedHouseList = data.data.page.list;
            this.unitedHouseList.forEach(item => {
              item.arrivalsTime = moment(item.arrivalsTime).format('MM/DD HH:mm')
              item.predissociationTime = moment(item.predissociationTime).format('MM/DD HH:mm')
            })
            if (this.pageIndex == 1) {
              this.totalPage = data.data.page.totalCount;
            }
          } else {
            this.$message.error(data.msg);
          }
          this.guestListLoading = false;
        });

      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val;
        this.pageIndex = 1;
        this.getDataList();
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val;
        this.getDataList();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .dl_drop {
    color: rgba(0, 0, 0, 0.65);
    z-index: 999;
    border-radius: 4px;
    overflow: hidden;
  }

  .dl_drop dd {
    padding: 0 15px;
    font-size: 13px;
    height: 35px;
    line-height: 35px;
    cursor: pointer;
    white-space: nowrap;
    margin: 0px;
  }

  .el-form {
    /deep/ .el-radio+.el-radio {
      margin-left: 0;
      margin-bottom: 5px;
    }
  }

  .ant-popover-inner-content {
    padding: 12px 16px;
    color: #002140;

    .table_recent_price_ul {
      max-width: 900px;

      table {
        border-collapse: collapse;
        width: 100%;

        thead,
        th,
        tr,
        tt,
        u,
        ul,
          {
          font: inherit;
          font-size: 100%;
          margin: 0;
          padding: 0;
          vertical-align: initial;
          border: 0;
        }


      }

    }

  }

  .recent_price_ul table th>.list_box>span {
    line-height: 36px;
    background: #f0f0f0;
    height: 36px;
  }

  .table_recent_price_ul.table_recent_price_ul table tbody tr td:first-of-type .list_box span {
    height: calc(100% + 1px);
  }

  .recent_price_ul table td>.list_box>span {
    height: 95px;
  }

  .recent_price_ul table td>.list_box>span,
  .recent_price_ul table th>.list_box>span {
    float: left;
    width: 150px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, .25);
    margin-left: -1px;
    margin-top: -1px;
  }

  .recent_price_ul table td:first-of-type>.list_box span>div:first-of-type,
  .recent_price_ul table td>.list_box>span>div:first-of-type {
    margin-top: 8px;
    margin-bottom: 6px;
  }

  .table_recent_price_ul.table_recent_price_ul td:nth-of-type(2) .list_box {
    max-height: 340px;
    overflow: auto;
  }
</style>
